import { root, useState, memo, useMemo, useCallback } from './MyReact';
// const { memo } = React;

const Child = function Child(props){
  console.log('child');
  return (
    <div>
      <h1>count2: { props.childData }</h1>
      <button onClick={ props.setCount2 }>Add Count2</button>
    </div>
  )
}

function App(){
  const [ count1, setCount1 ] = useState(0);
  const [ count2, setCount2 ] = useState(0);

  const childData = useMemo(() => ({count2}), [count2]);
  
  const cbSetCount2 = useCallback(() => {
    setCount2((count) => count + 1);
  }, []);



  return (
    <>
      <div>Hello React Hooks</div>
      <h1>count1: { count1 }</h1>
      <button onClick={() => setCount1(count1 + 1)}>Add Count1</button>
      {/* <Child count2 = {count2} /> */}
      <Child childData = {childData} setCount2={ cbSetCount2 }/>
      {/* <button onClick={() => setCount2(count2 + 1)}>Add Count2</button> */}
    </>
  )
}

root.render(<App />);

export default App;